import { ref } from 'vue';
import * as utils from 'video-action/libs/utils.js';

export function useVideo(annotationState, video) {
  const isPaused = ref(true)
  const isStopped = ref(true)
  const showVideoPlayer = ref(false)
  let videoPlayTimeout
  let videoPlayInterval
  let lastLeftCurrentFrame

  const play = () => {
    const videoPlayer = document.getElementById('video-player')
    isPaused.value = false
    isStopped.value = false
    videoPlayer.playbackRate = annotationState.value.videoPlaybackRate;
    videoPlayer.play()
    const duration = ((utils.index2time(video.value.fps, annotationState.value.frame.right) - videoPlayer.currentTime) * 1000) / videoPlayer.playbackRate;
    videoPlayTimeout = setTimeout(handleStop, duration)
    videoPlayInterval = setInterval(
      () => moveLeftFrame(1),
      1000 / video.value.fps / videoPlayer.playbackRate
    )
  };

  const pause = () => {
    clearTimeout(videoPlayTimeout)
    clearInterval(videoPlayInterval)
    isPaused.value = true
    const videoPlayer = document.getElementById('video-player')
    videoPlayer.pause()
  };

  const stop = () => {
    const videoPlayer = document.getElementById('video-player')
    videoPlayer.pause()
    
    videoPlayer.currentTime = utils.index2time(
      video.value.fps,
      lastLeftCurrentFrame ?? annotationState.value.frame.left
    )
    showVideoPlayer.value = false
    isPaused.value = true
    isStopped.value = true
    clearTimeout(videoPlayTimeout)
    clearInterval(videoPlayInterval)
  };

  const handlePlayPause = () => {
    const videoPlayer = document.getElementById('video-player')
    if (!showVideoPlayer.value) {
      showVideoPlayer.value = true
      lastLeftCurrentFrame = annotationState.value.frame.left;
      videoPlayer.currentTime = utils.index2time(video.value.fps, annotationState.value.frame.left)
      play()
    } else {
      isPaused.value ? play() : pause();
    }
  };

  const handleStop = () => {
    stop()
    annotationState.value.frame.left = lastLeftCurrentFrame;
  }

  // key bindings
  const moveLeftFrame = (delta) => {
    const newFrame = annotationState.value.frame.left + delta
    if (newFrame >= 0 && newFrame <= video.value.frames) {
      if (newFrame > annotationState.value.frame.right) {
        annotationState.value.frame.left = annotationState.value.frame.right
        annotationState.value.frame.right = newFrame
        currentFocus.value = 'right'
      } else {
        annotationState.value.frame.left = newFrame
      }
    }
  }
  const moveRightFrame = (delta) => {
    const newFrame = annotationState.value.frame.right + delta
    if (newFrame >= 0 && newFrame <= video.value.frames) {
      if (newFrame < annotationState.value.frame.left) {
        annotationState.value.frame.right = annotationState.value.frame.left
        annotationState.value.frame.left = newFrame
        currentFocus.value = 'left'
      } else {
        annotationState.value.frame.right = newFrame
      }
    }
  }
  const moveRange = (interval) => {
    if (interval < 0) {
      if (Math.min(annotationState.value.frame.left, annotationState.value.frame.right) + interval >= 0) {
        annotationState.value.frame.left += interval
        annotationState.value.frame.right += interval
      }
    } else {
      if (
        Math.max(annotationState.value.frame.left, annotationState.value.frame.right) + interval <=
        video.value.frames
      ) {
        annotationState.value.frame.left += interval
        annotationState.value.frame.right += interval
      }
    }
  }

  /** @type {import('vue').Ref<'left' | 'right' | 'range'>} */
  const currentFocus = ref('range')

  return {
    isPaused,
    isStopped,
    showVideoPlayer,
    play,
    pause,
    stop,
    handlePlayPause,
    handleStop,
  };
}
